<template>
  <a-card :bordered="false" class="xn-mb10">
    <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
      <a-row :gutter="24">
        <a-col :span="4">
          <a-form-item name="userStatus" label="是否有营商">
            <a-select
                v-model:value="searchFormState.hasBusiness"
            >
              <a-select-option  key="2" value=""></a-select-option>
              <a-select-option  key="1" value="1">有营商</a-select-option>
              <a-select-option  key="0" value="0">无营商</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item name="userStatus" label="日期范围">
            <a-select
                v-model:value="searchFormState.dateRange"
            >
              <a-select-option  key="0" value=""></a-select-option>
              <a-select-option  key="3" value="3">3天内</a-select-option>
              <a-select-option  key="7" value="7">7天内</a-select-option>
              <a-select-option  key="15" value="15">15天内</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item name="userStatus" label="被投诉号码">
            <a-input
                v-model:value="searchFormState.complainantNumber"
            />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item name="issuedNumber" label="营商下发号码">
            <a-input
                v-model:value="searchFormState.issuedNumber"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-button type="primary" @click="tableRef.refresh(true)">
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
          <a-button class="snowy-button-left" @click="reset">
            <template #icon><redo-outlined /></template>
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
	<a-card :bordered="false">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
		>
		</s-table>
	</a-card>
	<ImportModel ref="importModelRef" />
	<Form ref="formRef" @successful="tableRef.refresh()" />
</template>

<script setup name="tousu">
	import Form from './form.vue'
	import tousuApi from '@/api/biz/tousuApi'
	import dayjs from "dayjs";
	import { Input, Select } from 'ant-design-vue'
	import ImportModel from "./importModel.vue";
	const aInput = Input
	const aSelect = Select
	 const tableRef = ref()
	const formRef = ref()
  	const searchFormState = ref({})
	const columns = [
		{
		  title: '投诉号码',
		  dataIndex: 'accusedNumber'
		},
		{
		  title: '投诉内容',
		  dataIndex: 'complaintContent',
		  width: 400
		},
		{
			title: '投诉时间',
			dataIndex: 'complaintTime',
			sorter: true
		},
		{
			title: '被投诉号码',
			dataIndex: 'complainantNumber'
		},
		{
			title: '被投诉号码所属省/营商',
			customRender: ({ record }) => {
				return ` ${record.accusedProvince || ''} ${record.accusedOperator || ''}`
			}
		},
		{
			title: '归属时间',
			dataIndex: 'belongTime',
			customRender: ({ text }) => {
				return text ? dayjs(text).format('YYYY-MM-DD') : ''
			},
			sorter: true
		},
		{
			title: '营商下发号码',
			dataIndex: 'issuedNumber'
		},
		{
			title: '所属客户',
			dataIndex: 'belongCustomer'
		},
		{
			title: '号码归属地',
			dataIndex: 'belongArea',
			customRender: ({ record }) => {
				return `${record.belongProvince || ''} ${record.belongCity || ''}`
			}
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 100,
			customRender: ({ record }) => {
				return h('a', {
					onClick: () => {
						formRef.value.onOpen(record)
					}
				}, '编辑')
			}
		},
		// {
		// 	title: '操作',
		// 	dataIndex: 'action',
		// 	width: 100,
		// 	customRender: ({ record }) => {
		// 		return h('a', {
		// 			onClick: () => {
		// 				formRef.onOpen()
		// 			}
		// 		}, '编辑')
		// 	}
		// },
	// 	{
	// 		title: '营商下发号码',
	// 		dataIndex: 'issuedNumber',
    //   customRender: ({ record }) => {
    //     return h(aInput, {
    //       value: record.issuedNumber,
    //       onChange: (e) => {
    //         record.issuedNumber = e.target.value
    //         // 这里可以添加保存逻辑，如调用API保存修改
    //       },
    //       onBlur: (e) => { // 添加失焦保存
    //         console.log('issuedNumber')
    //         tousuApi.updateIssuedNumber({
    //           id: record.id,
    //           issuedNumber: e.target.value
    //         }).then(() => {
    //           message.success('保存成功')
    //         }).catch(() => {
    //           message.error('保存失败')
    //         })
    //       }
    //     })
    //   }
	// 	},
	// 	{
	// 		title: '所属客户',
	// 		dataIndex: 'belongCustomer',
    //   customRender: ({ record }) => {
    //     return h(aInput, {
    //       value: record.belongCustomer,
    //       onChange: (e) => {
    //         record.belongCustomer = e.target.value
    //         // 这里可以添加保存逻辑，如调用API保存修改
    //       },
    //       onBlur: (e) => { // 添加失焦保存
    //         console.log('belongCustomer')
    //         tousuApi.updateBelongCustomer({
    //           id: record.id,
    //           belongCustomer: e.target.value
    //         }).then(() => {
    //           message.success('保存成功')
    //         }).catch(() => {
    //           message.error('保存失败')
    //         })
    //       }
    //     })
    //   }
	// 	},
    // {
    //   title: '号码归属地',
    //   dataIndex: 'belongArea',
    //   customRender: ({ record }) => {
    //     return h('div', [
    //       h(aSelect, {
    //         style: { width: '120px', marginRight: '8px' },
    //         value: record.province,
    //         onChange: (value) => handleProvinceChange(value, record),
    //         options: provinceOptions.value,
    //         placeholder: '请选择省'
    //       }),
    //       h(aSelect, {
    //         style: { width: '120px' },
    //         value: record.city,
    //         onChange: (value) => { record.city = value },
    //         onBlur:(e) =>{
    //           console.log('issuedNumber',record)
    //           tousuApi.updateBelongArea({
    //             id: record.id,
    //             belongProvince: record.province,
    //             belongCity: record.city
    //           }).then(() => {
    //             message.success('保存成功')
    //           }).catch(() => {
    //             message.error('保存失败')
    //           })
    //         },
    //         options: cityOptions.value[record.province] || [],
    //         placeholder: '请选择市',
    //         disabled: !record.province // 未选省时禁用市选择
    //       })
    //     ])
    //   }
    // }

	]
	// 列表选择配置
	const loadData = (parameter) => {
    parameter.hasBusiness = searchFormState.value.hasBusiness
    parameter.dateRange = searchFormState.value.dateRange
    parameter.complainantNumber = searchFormState.value.complainantNumber
    parameter.issuedNumber = searchFormState.value.issuedNumber
	return tousuApi.tousuPage(parameter).then((data) => {
      data.records = data.records.map((item) => {
        item.province = item.belongProvince
        item.city = item.belongCity
        return item
      })
		return data
	})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}


</script>
